<template>
	<view class="container">
		<view class="u-page">
			<!-- 顶部专业分类-->
			<u-tabs 
				style="position: fixed;top: 0rpx;z-index: 999;width: 100%"
				bar-width="100"
				:list="majorList" 
				bg-color="#f4f4f5 " 
				:is-scroll="true" 
				:current="currentmajor" 
				@change="tabsChange">
			</u-tabs>
			<div style="height: 55rpx;"/>
			<view class="cards" v-for="(item,index) in questionList">
				<!-- 题目cards-->
				<u-card :title="item.questionTitle" :sub-title="item.date" margin="20rpx 0rpx"
					box-shadow="2px 2px 2px #888888" border-radius="0" :body-style="cardstyle" :head-style="cardstyle"
					:foot-style="cardstyle">
					<view class="card-head" slot="head">
						<view class="card-head-item " @click="OtherUserDetails(item.questionUserInfo.userid)">
							<div v-if="item.questionUserInfo.sex == 0">
								<u-avatar :src="item.questionUserInfo.imagepath" mode="circle" :show-sex="true"
									sex-icon="woman"></u-avatar>
							</div>
							<div v-else>
								<u-avatar :src="item.questionUserInfo.imagepath" mode="circle" :show-sex="true"
									sex-icon="man"></u-avatar>
							</div>
						</view>
						<div style="float:left">
							<view class="card-head-item " style="width: 20%;">
								<p style="float: left;font-weight: 500;">{{item.questionUserInfo.username}}</p>
							</view>
							<view class="card-head-item">
								<p style="float: none;color: #C0C4CC;">{{item.date}}发布</p>
							</view>
						</div>
					</view>
					<view class="card-body" slot="body" @click="clickQuestion(index)">
						<div class="questionTitle" style="font-weight: 600;font-size: 30rpx;color: #303133;text-align: left;">
							{{item.questiontitle}}
						</div>
						<view class="card-body-item">
							<p class="" style="font-size: 25rpx;line-height:normal">{{item.describe}}</p>
							<image :src="JSON.parse(item.imagePath).img1" mode="aspectFill">
							</image>
						</view>
					</view>
					<view class="" slot="foot">
						<u-icon name="chat-fill" size="30" :label="5"></u-icon>
						<view class="like" :class="{ highlight: item.islike }" style="float: left;margin-right: 15rpx;">
							<u-icon v-if="!item.islike" name="thumb-up" :size="30" color="#9a9a9a"
								@click="getLike(index)" :label="item.likenum">
							</u-icon>
							<u-icon v-if="item.islike" name="thumb-up-fill" :size="30" @click="getLike(index)"
								:label="item.likenum"></u-icon>
						</view>
						<view class="card-head-item" style="float: right;color: lightgreen;">
							<p>该问题距您{{distance(item.latitude,item.longitude,userInfo.latitude,userInfo.longitude)}}m</p>
						</view>
					</view>
				</u-card>
			</view>
			<u-loadmore @loadmore="loadmore"></u-loadmore>
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar active-color="#2b85e4" height="45px" bg-color="#f4f4f5" :list="tabbar"></u-tabbar>
	</view>
</template>
<script>
	import wxLocation from '../../../common/locationAPI/wxLocation.js'
	export default {
		data() {
			return {
				title: '首页',
				//当前用户信息
				userInfo: this.$store.state.user.userInfo,
				tabbar: '',
				fo: '关注',
				//专业列表
				majorList: "",
				//当前选中专业索引
				currentmajor: 0,
				//问题list:从store里取
				questionList: "",
				//card内部head、body样式
				cardstyle: {
					"padding-top": "0rpx",
					"padding-bottom": "10rpx"
				}
			}
		},
		watch: {
			"$store.state.majorList.majorList"() {
				this.majorList = this.$store.getters.majorList;
			},
			"$store.state.questionList.questionList"() {
				this.questionList = this.$store.getters.questionList;
			},
			"$store.state.user.userInfo"() {
				this.userInfo = this.$store.getters.user;
			}
		},
		onLoad() {
			//后台获取专业列表
			this.$store.dispatch('getMajorList');

			//console.log("ff"+this.majorList)
			this.$store.dispatch('getQuestionList', this.currentmajor + 1);
			//获取
			this.tabbar = this.$store.state.tabbar.tarbarList;
			//wxLocation.getLocation();
		},
		methods: {
			//距离计算
			distance(la1, lo1, la2, lo2) {
				console.log(la1);
				console.log(lo1);
				console.log(la2);
				console.log(lo2);
				var La1 = la1 * Math.PI / 180.0;
				var La2 = la2 * Math.PI / 180.0;
				var La3 = La1 - La2;
				var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(
					Math.sin(Lb3 / 2), 2)));
				s = s * 6378.137; //地球半径  
				s = Math.round(s * 10000) / 10000;
				s = s * 1000;
				console.log("计算结果", s , 'M');
				return s.toFixed(1);
			},
			//切换专业tab
			tabsChange(index) {
				//改变当前选中专业的索引
				this.currentmajor = index;
				this.$options.methods.loadQuestionById.bind(this)();
			},
			//根据当前专业id加载问题
			loadQuestionById() {
				//通过当前选中专业的索引取出专业id
				let currentMajorId = this.majorList[this.currentmajor].id;
				this.$options.methods.loadQuestionList.bind(this)();
			},
			//加载当前专业问题
			loadQuestionList() {
				console.log("加载当前专业问题");
				this.$store.dispatch('getQuestionList', this.currentmajor + 1);
			},
			//加载更多问题
			loadmore() {
				console.log("加载更多问题");
				//TODO 后端接口
			},
			//点击进入某个问题
			clickQuestion(index) {
				console.log("进入问题");
				this.$u.route({
					url: "pages/comment-page/comment-page",
					params: {
						questionIndex: index
					}
				});

			},
			//点击关注按钮
			focus() {
				//改变按钮样式
				this.$data.focus = '已关注';
				console.log(this.$data.fo)
				//TODO 添加数据进数据库
			},
			// 点赞
			getLike(index) {
				//修改点赞状态
				this.$store.commit("changeIsLike", index);
				//修改点赞数
				if (this.questionList[index].islike == true) {
					this.$store.commit("changeLikeNum", this.questionList[index].likenum++, index);
					uni.request({
						url: this.$url + 'questioninfo/changeLikeNum',
						data: {
							questionId: this.questionList[index].id,
							num: this.questionList[index].likenum
						},
						success: (res) => {
							console.log("点赞成功");
						},
						fail: () => {
							console.log("点赞失败");
						}
					});
				} else {
					this.$store.commit("changeLikeNum", this.questionList[index].likenum--, index);
					uni.request({
						url: this.$url + 'questioninfo/changeLikeNum',
						data: {
							questionId: this.questionList[index].id,
							num: this.questionList[index].likenum
						},
						success: (res) => {
							console.log("撤销点赞成功");
						},
						fail: () => {
							console.log("撤销点赞失败");
						}
					});
				}
			},
			//查看用户详情
			OtherUserDetails(e) {
				this.$u.route({
					url: "pages/otherUserDetails/otherUserDetails",
					params: {
						userId: e
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0px;
		font-size: 15px;
		line-height: 22px;
	}

	.card-head-item {
		float: left;
		margin-right: 15rpx;
	}

	.card-head u-avatar {
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
	}

	.card-head image {
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
	}

	.card-head {
		height: 100rpx;
		margin-top: 20rpx;
	}

	.card-body-item {
		line-height: 24px;
		font-size: 15rpx;
		color: #606266;
		height: 150rpx;
		width: 100%;
	}

	.card-body-item p {
		width: 70%;
		height: 100%;
		float: left;
		//超过3行...省略
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.card-body-item image {
		width: 25%;
		flex: 0 0 120rpx;
		height: 100%;
		border-radius: 8rpx;
		margin-left: 12rpx;
		float: right;
	}

	.highlight {
		color: #5677fc;

		.num {
			color: #5677fc;
		}
	}
</style>
